<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="displayModuleTitle"
    :default-fullscreen="true"
    :show-ok-btn="false"
  >
    <Description
      title="详细信息"
      :column="2"
      :data="apiLogDetailData"
      :schema="apiLogDetailSchema"
    />
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, unref, computed } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Description } from '/@/components/Description/index';

  import { apiLogDetailSchema } from './log.data';
  import { getApiLog } from '/@/api/platform/log';

  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  import { displayTitle } from '/@/utils/QcUnifyUtil';

  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();

  export default defineComponent({
    name: 'ApiLogDetail',
    components: { BasicModal, Description },
    setup() {
      //接收父组件传递过来的数据对象
      const qcUnifyProps = ref<QcUnifyTransToChildProps>();
      /**
       * 处理显示的模块标题，用于显示在弹出框中的标题
       */
      let displayModuleTitle = computed(() => {
        return displayTitle(qcUnifyProps.value);
      });

      const apiLogDetailData = ref({});

      const [registerModal] = useModalInner(async (data) => {
        //接收父组件传递的数据
        console.log('data', data);
        if (data != undefined && data != null) {
          qcUnifyProps.value = unref(data);
          console.log('接收的对象', data.dataId);
        }

        getDetail();
      });

      /**
       * 查询详情
       */
      async function getDetail() {
        getApiLog(qcUnifyProps.value?.dataId)
          .then((res) => {
            console.log('res', res);
            apiLogDetailData.value = res;
          })
          .catch((ex) => {
            console.log('catch ', ex);
            createMessage.error(ex.msg);
          });
      }

      return {
        displayModuleTitle,
        registerModal,
        apiLogDetailSchema,
        apiLogDetailData,
        getDetail,
      };
    },
  });
</script>
